<html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="keyword" content="HWB">
    <meta name="description" content="HWB">
    <meta http-equiv="cache-control" content="max-age=0">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta id="i18n_pagename" content="index-common"/>
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
    <meta http-equiv="pragma" content="no-cache">
    <title>转账</title>

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <link rel="stylesheet" href="../default/css/common.css">
    <link rel="stylesheet" type="text/css" href="../default/css/payment.css"/>
    <link rel="stylesheet" type="text/css" href="../default/css/zhifu.css"/>

    <style type="text/css">
        input[type=text] {
            margin-bottom: 0px;
        }

        .main {
            width: 100%;
            padding: 60px 10px 50px 10px;
        }

        .notice_list_item {
            width: 100%;
            padding: 10px;
            flex-direction: column;
            text-align: center;
            border-bottom: 1px #ccc solid;
        }

        .notice_list_item:nth-child(1) {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .notice_list_item:nth-last-child(1) {
            border-bottom: none;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .notice_list_item_name {
            width: 100%;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .notice_list_item_time {
            margin-top: 5px;
        }

        .notice_list_item button {
            width: 95px;
            /* 宽度 */
            height: 35px;
            /* 高度 */
            margin: 10px auto;
            border-width: 0px;
            /* 边框宽度 */
            border-radius: 3px;
            /* 边框半径 */
            background: #1E90FF;
            /* 背景颜色 */
            cursor: pointer;
            /* 鼠标移入按钮范围时出现手势 */
            outline: none;
            /* 不显示轮廓线 */
            font-family: Microsoft YaHei;
            /* 设置字体 */
            color: white;
            /* 字体颜色 */
            font-size: 17px;
            /* 字体大小 */
            display: inline-block;
        }

        #fileList img {
            max-height: 300px;
        }

        .buttonbox {
            text-align: center;
        }

        .content_code_img {
            width: 250px;
        }

        .yiny {
            opacity: 1;
            visibility: visible;
            background: rgba(0, 0, 0, .6);
            position: fixed;
            z-index: 1000;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .tan {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            overflow: scroll;
        }

        form {
            margin-top: 20px;
        }

        .tana {
            width: 100%;
            height: 100%;
            align-items: center;
            overflow: scroll;
            display: flex;
        }

        .content_code_img {
            width: 200%;
            max-height: 100%;
            display: inline-block;
            align-items: center;
        }

        .tan h4 {
            color: #fff;
        }

        #voucher img {
            max-width: 200%;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }

        thead tr {
            background: -webkit-linear-gradient(left, #ff6999, #ff8369);
            background: -o-linear-gradient(right, #ff6999, #ff8369);
            background: -moz-linear-gradient(right, #ff6999, #ff8369);
            background: linear-gradient(to right, #ff6999, #ff8369);
            color: #555;
        }

        td,
        th {
            text-align: center;
            padding: 10px 0;
        }

        tbody tr:nth-child(2n - 1) {
            background: rgba(255, 255, 255, .8);
        }

        td,
        th {
            text-align: center;
            padding: 10px 0;
        }

        .loadmore,
        .loadover {
            text-align: center;
        }

        .weui-loadmore {
            width: 65%;
            margin: 1.5em auto;
            line-height: 1.6em;
            font-size: 14px;
            text-align: center;
        }

        .weui-loadmore__tips {
            display: inline-block;
            vertical-align: middle;
        }

        .content_input_item select {
            width: 75%;
            background: none;
            border: 1px #1f232d solid;
            border-radius: 3px;
            padding: 5px 10px;
            color: #555;
        }

        .content_radio {
            margin: 20px auto;
        }

        .get_code {
            width: 30%;
            height: inherit;
            color: #1f232d;
            text-align: center;
        }
    </style>
</head>

<body>
<div id="view">

    <header class="mui-bar mui-bar-nav">
        <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back "></a>
        <h1 class="mui-title">转账</h1>
        <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right wirecord" type="button">转账记录</button>
    </header>
    <div class="main">
        <div class="notice_list_item">
            <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/icon/user-logo.png" class="content_main_img"
                 alt="" width="100">
            <div class="content_radio_box">
                <div class="content_radio pretty circle o-info">
                    <label><span>阅读宝:</span><b id="user-balance"></b></label>
                </div>
            </div>
            <form>
                <div class="content_input_item">
                    <span>转账手机号:</span>
                    <input type="text" id="phoneNumber" name="phoneNumber" class="form-control"
                           placeholder="请输入转账手机号"
                           onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
                </div>
                <div class="content_input_item">
                    <span>转账数量:</span>
                    <input type="text" id="transferVolume" name="transferVolume" class="form-control"
                           placeholder="请输入转账数量"
                           onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
                </div>
            </form>
            <div class="buttonbox">
                <button id="gosube" onclick="quzhifu()" data-loading-text="提交中">确认转账</button>
            </div>

        </div>
    </div>

</div>


<!--<script src="../default/js/Ztempl.2.2.2.js"></script>-->
<!--<script src="../default/js/common.js"></script>-->
<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<!--<script src="../default/js/mui-view.js"></script>-->
<!--<script src="../default/js/feedback.js"></script><script src="../default/js/cookie.js"></script>-->
<script>

    $(function () {
        queryTotalPrice();
    });

    // 阅读宝数量
    function queryTotalPrice() {
        $.ajax({
            url: website + "/UserController/findByUserBalance",
            type: "post",
            data: {
                userId: userId
            },
            success: function (data) {
                $("#user-balance").html(data.data.balance);
            }
        });
    }

    function quzhifu() {
        var phoneNumber = $("#phoneNumber").val();
        var transferVolume = $("#transferVolume").val();
        var balance = $("#user-balance").html();

        if(phoneNumber=='' || phoneNumber==null){
            mui.toast("请输入转账手机号");
            return;
        }else if(transferVolume=='' || transferVolume==null || transferVolume==0){
            mui.toast("转账数量不能为空");
            return;
        }else if(transferVolume > parseInt(balance)) {
            mui.toast("余额不足");
            return;
        } else {
            mui("#gosube").button('loading');//切换为loading状态
            $.ajax({
                url: website + "/DetailsOfTransferController/transferAccountsToUser",
                type: "post",
                data: {
                    userId1: userId,
                    transferVolume: transferVolume,
                    phoneNumber: phoneNumber
                },
                success: function (data) {
                    if (data.code == 400) {
                        mui.toast(data.msg);
                        mui("#gosube").button('reset');//切换为reset状态(即重置为原始的button)
                        return;
                    } else if (data.code == 200) {
                        mui.toast("转账成功");
                        setTimeout(function () {
                            location.reload();
                        }, 1000)
                    }
                }, error: function () {
                    mui.toast("转账失败");
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                }
            });
        }
    }

    mui('header').on('tap', '.wirecord', function (e) {
        mui.openWindow({
            url: 'static-benefit.html'
        });
    });

</script>
</body>

</html>
